<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>后台管理系统-登录</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/static/favicon.ico}">
    <link rel="stylesheet" th:href="@{/static/css/login.css}">
</head>
<body>
<div class="container">
    <!--<header></header>-->
    <content>
        <div class="login-box">
            <form id="loginForm">
            <div class="title">
                <span>用户登录</span> <span>Login User</span>
            </div>
            <div class="row">
                <div class="line">
                    <span>欢迎登录思源后台管理系统</span>
                </div>
            </div>

            <div class="login-form">
                <div class="form-row">
                    <div class="u-logo">
                        <div class="u-logo-img1"></div>
                    </div>
                    <input type="text" placeholder="用户名" name="userName" id="userName" autofocus autocomplete="off">
                </div>
                <div class="form-row">
                    <div class="u-logo">
                        <div class="u-logo-img2"></div>
                    </div>
                    <input type="password" name="password" id="password" placeholder="密码">
                </div>
                <div class="form-row">
                    <input type="checkbox" name="rememberme"> <span class="remember">记住我</span>
                    <span style="padding-left: 30px;color: red;font-size:14px; display: none;" id="msg">请输入用户名</span>
                    <span class="forget">忘记密码</span>
                </div>

                <div class="form-row">
                    <input type="text" name="captcha" id="captcha" placeholder="验证码" class="yzm" autocomplete="off">
                    <img src="/captcha" class="captcha" alt="验证码">
                    <span class="huan">换一个</span>
                </div>
                <div class="form-row">
                    <button type="submit" class="login-btn">登录</button>
                </div>
            </div>
            </form>
        </div>
    </content>
    <footer>
        © 2008 - 2018 陕西贝尔人才服务有限公司 版权所有 陕ICP备06007417号
    </footer>
    <script th:src="@{/static/plugins/jquery.js}"></script>
    <script>
        $(function(){
            var $msg = $("#msg");
            /*绑定提交事件*/
            $("#loginForm").on('submit',function(e) {
                e.preventDefault();  //阻止默认提交事件
                var userName = $("#userName").val();
                var password = $("#password").val();
                var captcha = $("#captcha").val();
                debugger;
                if (!userName) {
                    $msg.text("请输入用户名");
                    $msg.show(); //删除 hide 样式表
                    return false;
                } else if (!password) {
                    $msg.text("请输入密码");
                    $msg.show(); //删除 hide 样式表
                    return false;
                } else if (!captcha) {
                    $msg.text("请输入验证码");
                    $msg.show(); //删除 hide 样式表
                    return false;
                }

                $.ajax({
                    url: '/login/verify',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        userName: userName,
                        password: password,
                        captcha: captcha
                    },
                    success: function (msg) {
                        if (msg.code == 200) {
                            location.href = "/";
                        } else {
                            $("#captcha").val("")
                            $(".huan").click();
                            $msg.text(msg.message);
                            $msg.show(); //删除 hide 样式表
                        }
                    }
                });
            });




            $(".huan").on('click',refreshCode);

            //刷新验证码
            function refreshCode(){
                $(".captcha").attr("src","/captcha");
            }
        });

    </script>
</div>
</body>
</html>